<template>
  <input id="upload_file" type="file" @change="handleFileSelect" ref="fileInputTest" style="display: none;">
  <!-- 收藏的站点表格 -->
  <div id="favorite_web" v-show="show && !showFolder" style="margin-top: -15px">
    <draggable
        class="favorite_web_draggable"
        ghost-class="favorite_web_draggable_ghost"
        :modelValue="favoriteWebList"
        @update:modelValue="updateFavoriteWebList"
        :group="{ name: 'favoriteWebList' }" :animation="200" itemKey="id">
      <template #item="{ element, index }">
        <div class="favorite_web_item"
             :id="'favorite_web_item_' + index"
             @click="skipToFavoriteWeb(element)"
             @contextmenu.prevent="clickFavoriteWebItem($event, element, index)">
          <div style="padding: 0 10px;overflow: hidden" v-if="element.type === 'ADD' || element.type === 'WEB'">
            <n-flex id="favorite_web_item_id">
              <img :src="getFavicon(element)" class="favorite_web_item_favicon" @error="handleImageError" alt=""/>
              <span class="favorite_web_item_title">{{ element.name }}</span>
            </n-flex>
            <div class="favorite_web_item_url">
              {{ extractDomain(element) }}
            </div>
<!--            <img :src="getFavicon(element)" style="width: 20px;height: 20px;position: relative;margin-left: 10px;opacity: 0.2;scale: 3;overflow: hidden" @error="handleImageError" alt="" v-if="element.type === 'ADD'"/>-->
          </div>
          <div v-if="element.type === 'CLOCK'">
            <div style="height: 50px;display: grid;grid-template-columns: 50px auto">
              <ClockComponent style="margin: auto 5px;"/>
              <div style="padding-left: 10px;margin: auto">
                <div class="favorite_web_item_title">{{ getCurrentDateTime.date }}</div>
                <div class="favorite_web_item_url">{{ getCurrentDateTime.weekday }}</div>
              </div>
            </div>
          </div>
          <div v-if="element.type === 'FOLDER'" style="width: 100%" @click="skipToFolder(element.id)">
            <div style="height: 50px;display: grid;grid-template-columns: auto 10px;">
              <div style="margin: auto 10px">
                <n-flex id="favorite_web_item_id">
                  <img :src="getFavicon(element)" class="favorite_web_item_favicon" @error="handleImageError" alt=""/>
                  <div class="favorite_web_item_title" style="margin-left: 5px">{{element.name}}</div>
                </n-flex>
                <div class="favorite_web_item_url">{{(element.child.length - 2) + '个页签'}}</div>
              </div>
              <img :src="getFavicon(element)" style="margin: auto;height: 30px;width: 35px;opacity:0.2 !important;scale: 2;top:15px;position: relative;right: 40px" @error="handleImageError" alt=""/>
            </div>
          </div>
          <div class="card_file" v-if="element.type === 'FILE'"
               @click="triggerFileUpload"
               @drop="handleDrop"
               @mouseover="fileUpload.select = true"
               @mouseleave="fileUpload.select = false"
               @dragover.prevent
               @dragenter.prevent>
            <div v-if="!fileUpload.work">
              <div v-if="!fileUpload.select">
                <n-flex id="favorite_web_item_id">
                  <img :src="getFavicon(element)" class="favorite_web_item_favicon" @error="handleImageError" alt=""/>
                  <span class="favorite_web_item_title">{{ element.name }}</span>
                </n-flex>
                <div class="favorite_web_item_url" style="padding: 2px">
                  <div class="progress-container">
                    <div class="progress-bar" :style="{ width: progress + '%' }">
                      <span
                          style="color: #0E172B;position: absolute;top: 50%;left:50%;transform: translate(-50%, -50%);font-size: 7px;font-weight: bold">10/100M</span>
                    </div>
                  </div>
                </div>
              </div>
              <div v-else>
                <div style="width: 110px;height: 45px;margin: auto;border-radius: 5px;text-align: center">
                  <img src="@/assets/images/system/fileUpload1.png" style="height: 20px;" alt="">
                  <div style="font-size: 8px;font-weight: bold">点击此处上传文件</div>
                </div>
              </div>
            </div>
            <div v-else>
              <n-flex id="favorite_web_item_id">
                <img :src="getDocumentFavicon(element)" class="favorite_document_favicon" @error="handleImageError"
                     alt=""/>
                <span class="favorite_web_item_title">{{ fileUpload.name }}</span>
              </n-flex>
              <div style="width: 100%;margin-top: 6px;margin-bottom: 2px">
                <n-flex>
                  <div style="font-size: 6px;color: gray;font-weight: bold">
                    {{ !(fileUpload.uploadInfo.progress >= 100.0) ? (fileUpload.size + 'M') : '已完成' }}
                  </div>
                  <div style="font-size: 6px;color: gray;font-weight: bold;"
                       v-if="!(fileUpload.uploadInfo.progress >= 100.0)">{{ fileUpload.uploadInfo.speed + 'M/s' }}
                  </div>
                  <div style="font-size: 6px;color: gray;font-weight: bold;margin-left: auto;">
                    {{ fileUpload.uploadInfo.progress + '%' }}
                  </div>
                </n-flex>

                <div style="width: 100%;height: 4px;background-color: white;border-radius: 10px;box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1);overflow: hidden">
                  <div style="height: 100%;transition: width 0.3s ease;"
                       :style="{width: fileUpload.uploadInfo.progress + '%', background: fileUpload.uploadInfo.progress >= 100.0 ? 'linear-gradient(to top, #379d00, #65e100)' : 'linear-gradient(to top, #b70000, #e10000)'}"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </template>
    </draggable>
  </div>

  <div id="favorite_web" v-if="!show && showFolder" style="margin-top: -15px">
    <draggable
        class="favorite_web_draggable"
        ghost-class="favorite_web_draggable_ghost"
        :modelValue="favoriteFolderWeb.child"
        @update:modelValue="updateFavoriteWebFolderList"
        :group="{ name: 'favoriteWebList' }" :animation="200" itemKey="id">
      <template #item="{ element, index }">
        <div class="favorite_web_item"
             :id="'favorite_web_item_' + index"
             @click="skipToFavoriteWeb(element)"
             @contextmenu.prevent="clickFavoriteWebItem($event, element, index)">

          <div v-if="element.type === 'BACK'" style="margin: auto;">
            <img :src="getFavicon(element)" style="margin: auto;height: 35px;width: 35px;" @error="handleImageError" alt=""/>
          </div>

          <div style="padding: 0 10px;overflow: hidden" v-if="element.type === 'ADD' || element.type === 'WEB'">
            <n-flex id="favorite_web_item_id">
              <img :src="getFavicon(element)" class="favorite_web_item_favicon" @error="handleImageError" alt=""/>
              <span class="favorite_web_item_title">{{ element.name }}</span>
            </n-flex>
            <div class="favorite_web_item_url">
              {{ extractDomain(element) }}
            </div>
          </div>
        </div>
      </template>
    </draggable>
  </div>

  <!-- 右键菜单 -->
  <div id="favorite_web_item_menu_id" v-show="favoriteWebItemMenu.show" :style="favoriteWebItemMenuPosition"
       class="favorite_web_item_menu">
    <n-flex vertical id="menu_item">
      <!--      <div id="menu_item_add" @click="operationFavoriteWeb('add')">-->
      <!--        <n-flex style="gap: 8px">-->
      <!--          <img src="@/assets/images/favoriteWeb/add1.png" alt="edit">-->
      <!--          <span>ADD</span>-->
      <!--        </n-flex>-->
      <!--      </div>-->
      <div id="menu_item_edit" @click="operationFavoriteWeb('edit')">
        <n-flex style="gap: 8px">
          <img src="@/assets/images/favoriteWeb/edit1.png" alt="edit">
          <span>EDIT</span>
        </n-flex>
      </div>
      <div id="menu_item_delete" @click="operationFavoriteWeb('delete')">
        <n-flex style="gap: 8px">
          <img src="@/assets/images/favoriteWeb/delete1.png" alt="edit">
          <span>DELETE</span>
        </n-flex>
      </div>
    </n-flex>
  </div>

  <!-- 编辑模态框 -->
<!--  <n-modal id="favorite_web_item_edit" v-model:show="favoriteWebItem.show" :on-after-leave="favoriteWebItemEdit">-->
  <n-modal id="favorite_web_item_edit" v-model:show="favoriteWebItem.show" :on-after-leave="favoriteWebItemEdit">
    <n-card :bordered="false" size="huge" role="dialog" aria-modal="true" class="favorite_web_item_edit_card">
      <n-flex justify="space-between" align="center" style="margin-bottom: 15px;">
        <div
            style="height: 20px;border-left: 3px solid #863DC7;padding: 0 5px;line-height: 20px;font-size: 16px;font-weight: 500;">
          {{ favoriteWebItemMenu.clickIndex === null ? activeFolder ? '新增目录' : '新增网页' : favoriteWebItem.type === 'FOLDER' ? '编辑目录' : '编辑网页' }}
        </div>
        <div style="padding-right: 0">
          <n-switch v-model:value="activeFolder" size="medium" v-if="!showFolder && favoriteWebItemMenu.clickIndex == null">
            <template #checked-icon>
              <img src="@/assets/images/system/Folder.png" alt="edit" style="width: 12px;height: 13px">
            </template>
            <template #unchecked-icon>
              <img src="@/assets/images/system/Bookmark.png" alt="edit" style="width: 10px;height: 10px">
            </template>
          </n-switch>
        </div>
      </n-flex>
      <n-flex vertical>
        <div>
          <input v-model="favoriteWebItem.name" class="favorite_web_item_edit_card_input" :placeholder="activeFolder ? '输入目录名称' : '输入网页名称'"/>
          <span v-if="favoriteWebItem.required.name" class="text_required_warn">web name is required</span>
        </div>
        <div v-if="!activeFolder && favoriteWebItem.type !== 'FOLDER'">
          <input v-model="favoriteWebItem.url" class="favorite_web_item_edit_card_input" :placeholder="activeFolder ? '' : '输入网页地址'"/>
          <span v-if="favoriteWebItem.required.name" class="text_required_warn">web url is required</span>
        </div>
      </n-flex>
      <div class="favorite_web_item_edit_card_button">
        <n-button color="#863DC7" @click="favoriteWebItemEdit('save')">保存</n-button>
        <n-button text @click="favoriteWebItemEdit('cancel')">取消</n-button>
      </div>
    </n-card>
  </n-modal>

</template>

<script>


import FileUploadService from '../../service/fileUploadService.js'
import Notification from '../../utils/notification'
import UUIDUtils from '../../utils/UUIDUtils'
import ClockComponent from '../components/ClockComponent.vue'

import draggable from "vuedraggable";

export default {
  components: {
    draggable, ClockComponent
  },
  props: ['favoriteWebList'],
  data() {
    return {
      activeFolder: false,
      show: true,
      showFolder: false,
      showFolderId: null,
      showAnimation: null,
      favoriteFolderWeb: {},
      favoriteWebItem: {
        show: false,
        name: null,
        url: null,
        required: {
          name: false,
          url: false
        }
      },
      // 收藏站点的右键菜单
      favoriteWebItemMenu: {
        show: false,
        clientX: 0,
        clientY: 0,
        clickIndex: 0,
      },
      fileUpload: {
        select: false,
        name: '准备中',
        size: 0,
        work: false,
        uploadInfo: {
          progress: 0,
          speed: 0
        }
      },
      progress: 10
    }
  },
  methods: {
    updateFavoriteWebList(newList) {
      // 保存变更之后的数据
      this.saveFavoriteWebList(newList, "sort", null)
    },
    updateFavoriteWebFolderList(newList) {
      this.favoriteFolderWeb.child = newList
      let findIndex = this.favoriteWebList.findIndex(item => item.id === this.showFolderId);
      if (findIndex !== -1) {
        this.favoriteWebList[findIndex] = this.favoriteFolderWeb;
        this.saveFavoriteWebList(this.favoriteWebList, "sort", null);
      }
    },
    operationFavoriteWeb(event) {
      console.log("event:", event)
      this.favoriteWebItemMenu.show = false;
      if (event === 'add') {
        console.log("UUID:", UUIDUtils.newUUID())
        this.favoriteWebItem.id = UUIDUtils.newUUID();
        this.favoriteWebItem.name = null;
        this.favoriteWebItem.url = null;
        this.favoriteWebItem.show = true;
        this.favoriteWebItemMenu.clickIndex = null;
      } else if (event === 'delete') {
        let deleteObj = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex]
        this.favoriteWebList.splice(this.favoriteWebItemMenu.clickIndex, 1);
        this.saveFavoriteWebList(this.favoriteWebList, "delete", deleteObj);
      } else if (event === 'edit') {
        this.favoriteWebItem.show = true;
        this.favoriteWebItem.id = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex].id;
        this.favoriteWebItem.name = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex].name;
        this.favoriteWebItem.url = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex].url;
        this.favoriteWebItem.type = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex].type;
        this.favoriteWebItem.child = this.favoriteWebList[this.favoriteWebItemMenu.clickIndex].child;
      }
    },
    skipToFolder(folderId) {
      this.show = false
      this.showFolder = true
      this.showFolderId = folderId;
      this.favoriteFolderWeb = this.favoriteWebList.find(element => element.id === folderId);
    },
    // 跳转到收藏页面
    skipToFavoriteWeb(favoriteWeb) {
      // 如果是新建页签则不跳转
      if (favoriteWeb.type !== 'WEB') {
        this.favoriteWebItem.name = null;
        this.favoriteWebItem.url = null;
        this.favoriteWebItemMenu.clickIndex = null;
        if (favoriteWeb.type === 'ADD') {
          this.favoriteWebItem.show = true;
        }else if (favoriteWeb.type === 'BACK') {
          this.show = true
          this.showFolder = false
          this.showFolderId = null;
        }
        return;
      }
      // 构建跳转链接
      const url = favoriteWeb.url.startsWith("http") ? favoriteWeb.url : "http://" + favoriteWeb.url;
      window.open(url, '_blank');
    },
    // 点击收藏卡片
    clickFavoriteWebItem(event, element, index) {
      console.log("点击卡片:", event)
      if (element.type !== 'WEB' && element.type !== 'FOLDER') {
        return;
      }
      event.preventDefault();
      this.favoriteWebItemMenu.show = true;
      const favoriteWebItem = document.getElementById('favorite_web_item_' + index).getBoundingClientRect();
      this.favoriteWebItemMenu.clientX = favoriteWebItem.x + favoriteWebItem.width - 20;
      this.favoriteWebItemMenu.clientY = favoriteWebItem.y + favoriteWebItem.height - 20;
      this.favoriteWebItemMenu.clickIndex = index;
    },
    favoriteWebItemEdit(event) {
      if (event === 'save') {
        let web = {};
        web.id = !this.favoriteWebItem.id ? UUIDUtils.newUUID() : this.favoriteWebItem.id
        web.name = this.favoriteWebItem.name
        web.url = this.favoriteWebItem.url
        web.child = this.favoriteWebItem.child
        web.type = !this.favoriteWebItem.type ? (this.activeFolder ? "FOLDER":"WEB") : this.favoriteWebItem.type

        if (!this.favoriteWebItem.id && !this.showFolder) {
          web.child = [{"id": "BACK", "type": "BACK"},{"id": "ADD", "name": "添加收藏", "url": "点我添加新的收藏", "type": "ADD"}]
        }

        if (this.activeFolder === 'WEB') {
          web.url = web.url.startsWith("http") ? web.url : "http://" + web.url;
        }
        if (web.name === null) this.favoriteWebItem.required.name = true;
        if (web.url === null) this.favoriteWebItem.required.url = true;
        if (web.name === null || (web.url === null && this.activeFolder === 'WEB')) return;

        // 新建
        if (this.favoriteWebItemMenu.clickIndex === null) {
          if (this.showFolder) {
            this.favoriteFolderWeb.child.push(web);
            let findIndex = this.favoriteWebList.findIndex(item => item.id === this.showFolderId);
            if (findIndex !== -1) {
              this.favoriteWebList[findIndex] = this.favoriteFolderWeb;
              this.saveFavoriteWebList(this.favoriteWebList, "sort", null);
            }
          }else {
            this.favoriteWebList.push(web);
            this.saveFavoriteWebList(this.favoriteWebList, "add", web);
          }
        } else {
          if (this.showFolder) {

          }else {
            this.favoriteWebList[this.favoriteWebItemMenu.clickIndex] = web
            this.saveFavoriteWebList(this.favoriteWebList, "update", web);
          }
        }
      } else {
        this.favoriteWebItem.required.name = false;
        this.favoriteWebItem.required.url = false;
      }
      this.favoriteWebItem.show = false;
      this.favoriteWebItem.type = null;

      // 复位网页添加
      this.activeFolder = false
    },
    // 处理文档点击事件
    handleDocumentClick(event) {
      const favoriteWebItemMenuId = document.getElementById('favorite_web_item_menu_id');
      if ((favoriteWebItemMenuId && !favoriteWebItemMenuId.contains(event.target))) {
        this.favoriteWebItemMenu.show = false
      }
    },
    // 获取网站图标
    getFavicon(element) {
      if (element.type === 'ADD') {
        return require("@/assets/images/add_red.png")
      } else if (element.type === 'FILE') {
        return require("@/assets/images/system/fileUpload.png")
      } else if (element.type === 'FOLDER') {
        return require("@/assets/images/system/Folder.png")
      } else if (element.type === 'BACK') {
        return require("@/assets/images/system/backup.png")
      }
      return "https://toolb.cn/favicon/" + element.url
    },
    getDocumentFavicon(fileName) {
      return require("@/assets/images/document/ppt.png")
    },
    handleImageError(event) {
      const errorUrl = event.target.currentSrc;
      const regex = /https?:\/\/[^/]+\/favicon\/(https?:\/\/[^\s]+)/;
      const match = errorUrl.match(regex);
      console.log("errorUrl:", errorUrl);

      if (errorUrl.includes('toolb') && match && match[1]) {
        const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/;
        const url = match[1].match(regex);
        event.target.src = 'https://kimi-img.moonshot.cn/webimg2/icon-cache-img/' + url ? url[1] : null;
      } else {
        event.target.src = require('@/assets/images/system/not_found.png');
      }
    },
    extractDomain(element) {
      const regex = /^(?:https?:\/\/)?(?:www\.)?([^\/]+)/;
      const match = element.url.match(regex);
      return match ? match[1] : null;
    },
    saveFavoriteWebList(favoriteWebList, event, favoriteWeb) {
      let data = {
        "favoriteList": favoriteWebList,
        "event": event,
        "favorite": favoriteWeb
      }
      this.$emit('change:favorite', data)
    },
    handleDrop(event) {
      event.preventDefault();
      const files = event.dataTransfer.files;
      if (files.length > 0) {
        FileUploadService.segmentUploadFile(files[0]);
      }
    },
    async handleFileSelect(event) {
      try {
        console.log("上传文件:", event.target.files[0].name);
        this.fileUpload.size = (event.target.files[0].size / (1024 * 1024)).toFixed(1);
        this.fileUpload.work = true;
        this.fileUpload.name = '校验中';

        let fileId = await FileUploadService.fileExistCheck(event.target.files[0]);
        this.fileUpload.name = event.target.files[0].name;
        if (fileId != null) {
          console.log("上传成功:", fileId)
          navigator.clipboard.writeText("https://dtools.cpolar.cn/file/preview/" + fileId);
          this.handleUploadSuccess(event.target.files[0].name);
        } else {
          await FileUploadService.segmentUploadFile(event.target.files[0], (data) => {
            console.log("status:", data.status, ";progress:", data.progress);
            this.fileUpload.uploadInfo.progress = data.progress.toFixed(1);
            this.fileUpload.uploadInfo.speed = data.speed;
            if (data.progress === 100) {
              console.log("上传成功:", data.fileId)
              navigator.clipboard.writeText("https://dtools.cpolar.cn/file/preview/" + data.fileId);
              this.handleUploadSuccess(this.fileUpload.name);
            }
          });
        }
      } catch (error) {
        console.error("文件上传出错:", error);
        Notification.error("文件上传失败，请重试。");
        this.resetUploadState();
      } finally {
        this.$refs.fileInputTest.value = null;
      }
    },
    handleUploadSuccess(fileName) {
      // 进度设置为 100
      this.fileUpload.uploadInfo.progress = 100;
      Notification.success(fileName + "上传成功!");
      this.resetUploadState();
    },
    resetUploadState() {
      let that = this;
      setTimeout(function () {
        that.fileUpload.work = false;
        that.fileUpload.uploadInfo.progress = 0;
        that.fileUpload.uploadInfo.speed = 0;
      }, 3000);
    },
    triggerFileUpload() {
      console.log(this.$refs.fileInputTest);
      this.$refs.fileInputTest.click()
    },

  },
  computed: {
    favoriteWebItemMenuPosition() {
      return {
        top: `${this.favoriteWebItemMenu.clientY}px`,
        left: `${this.favoriteWebItemMenu.clientX}px`
      }
    },
    getCurrentDateTime() {
      const now = new Date();

      // 获取日期（yyyy-MM-dd）
      const year = now.getFullYear();
      const month = String(now.getMonth() + 1).padStart(2, '0');
      const day = String(now.getDate()).padStart(2, '0');
      const date = `${month}月${day}日`;

      // 获取时间（HH:mm:ss）
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      const seconds = String(now.getSeconds()).padStart(2, '0');
      const time = `${hours}:${minutes}:${seconds}`;

      // 获取周几
      const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
      const weekday = weekdays[now.getDay()];

      return {date, time, weekday,};
    }
  },
  mounted() {
    // 事件监听
    document.addEventListener('click', this.handleDocumentClick);
    // 测试调用 triggerInput 方法
  },

  beforeDestroy() {
  }
}
</script>
<style>
body {
  --n-rail-color-active: #863DC7 !important;
  --n-box-shadow-focus: red !important;
}
@font-face {
  font-family: 'SweiHalfMoon';
  src: url('../../assets/fonts/SweiHalfMoon.ttf') format('opentype');
}

/* 收藏站点 */
.favorite_web_draggable {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  max-height: 40vh;
  overflow: scroll;
}

/* 收藏站点移动后占位样式 */
.favorite_web_draggable_ghost {
  opacity: 0.2;
  box-shadow: inset 0 0 0 1px gray;
}

/* 收藏站点每个卡片样式 */
.favorite_web_item {
  display: flex;
  align-items: center;
  height: 60px;
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  box-shadow: inset 0 15px 30px 0 rgba(255, 255, 255, 0.2), inset 0 0 15px 0 rgba(255, 255, 255, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 2px 0 rgba(255, 255, 255, 0.7);
}

.favorite_web_item:after {
  backdrop-filter: blur(30px);
}

/* 收藏站点每个卡片动作 */
.favorite_web_item:hover {
  background: rgba(255, 255, 255, 0.6);
  box-shadow: inset 0 15px 30px 0 rgba(255, 255, 255, 0.2), inset 0 0 15px 0 rgba(255, 255, 255, 0.2), inset 0 1px 1px 0 rgba(255, 255, 255, 0.5), inset 0 0 2px 0 rgba(255, 255, 255, 0.7);
  cursor: pointer;
}

#favorite_web_item_id {
  gap: 0 !important;
  flex-flow: nowrap !important;
}

#favorite_web_item_id > span {
  margin-left: 5px;
}

.favorite_web_item_favicon {
  height: 20px;
  width: 20px;
  user-select: none;
  border-radius: 10px;
  opacity: 0.85;
}

.favorite_document_favicon {
  height: 20px;
  width: 18px;
  user-select: none;
}

.favorite_web_item_title {
  //color: #0E172B;
  color: #181818;
  opacity: 0.9;
  white-space: nowrap;
  overflow: hidden;
  margin: auto 0;
  text-overflow: ellipsis;
  user-select: none;
  font-size: 12px;
}

.favorite_web_item_url {
  white-space: nowrap;
  margin-top: 10px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 9px;
  user-select: none;
  //color: #0E172B;
  //color: #333333;
  color: #737373;
  font-weight: bold;
}

.progress-container {
  height: 8px;
  width: 100%;
  background-color: white;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  box-shadow: 1px 1px 1px 0 rgba(0, 0, 0, 0.1)
}

.progress-bar {
  height: 100%;
  display: flex;
  font-size: 9px;
  //background-color: #CCD3F3;
  background: linear-gradient(to top, #b5bcda, #CCD3F3);
}

.favorite_web_item_menu {
  position: absolute;
  background-color: #ffffff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  border-radius: 10px;
  overflow: hidden;
  z-index: 200;
}

#menu_item {
  gap: 0 !important;
  margin: 10px 8px;
  user-select: none;
}

#menu_item img {
  margin: auto 0;
  width: 15px;
  height: 15px;
  padding: 4px;
  border: 1.5px solid #D9DADD;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.06);
}

#menu_item span {
  font-size: 12px;
  font-weight: 500;
  padding: 3px;
  color: #324158;
}

#menu_item_add div {
  padding: 6px;
  border-radius: 10px;
}

#menu_item_add div:hover {
  background-color: #f6f8fa;

  > img {
    box-shadow: 0 0 4px 1px #ABCEFF;
    border: 1.5px solid #ABCEFF;
  }
}

#menu_item_edit div {
  padding: 6px;
  border-radius: 10px;
}

#menu_item_edit div:hover {
  background-color: #f6f8fa;

  > img {
    box-shadow: 0 0 4px 1px #d8bfec;
    border: 1.5px solid #d8bfec;
  }
}

#menu_item_delete div {
  padding: 6px;
  border-radius: 10px;
}

#menu_item_delete div:hover {
  background-color: #f6f8fa;

  > img {
    box-shadow: 0 0 4px 1px #fadbdb;
    border: 1.5px solid #fadbdb;
  }
}


.text_required_warn {
  color: red;
  padding-left: 5px;
}

.favorite_web_item_edit_card {
  padding: 40px 0;
  width: 330px;
  position: fixed;
  left: calc(50vw - 150px);
  top: calc(50vh - 150px);
  align-items: center;
  border-radius: 20px;
}

.favorite_web_item_edit_card_input {
  color: #424242;
  width: 240px;
  outline: none;
  height: 35px;
  border-radius: 5px;
  border: 1px solid #e8e8e8;
  font-size: 14px;
  padding: 0 10px;
  margin: 5px 0;
}

.favorite_web_item_edit_card_input:focus {
  border: 1px solid #863DC7;
}

.favorite_web_item_edit_card_button {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  padding-top: 20px;
}

.card_file {
  padding: 0 10px;
  overflow: hidden;
  width: 100%;
}

.n-card > .n-card__content, .n-card > .n-card__footer {
  padding: 0 !important;
}

.n-button__content:hover {
  color: #863DC7 !important;
}

.n-button:not(.n-button--disabled):hover {
  color: #863DC7 !important;
}

.n-switch.n-switch--active .n-switch__rail {
  background-color: rgba(134, 61, 199, 0.5) !important;
  --n-box-shadow-focus: red !important;
}
.n-switch.n-switch--icon.n-switch--round.n-switch--rubber-band {
  --n-box-shadow-focus: red !important;
}

</style>